<template>
  <div>
    <el-card
      class="login-card"
      :body-style="{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '60px'}"
    >
      <el-form ref="loginForm" inline :model="formData" :rules="rules">
        <el-form-item prop="nickname">
          <el-input v-model="formData.nickname" placeholder="请输入您的昵称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="enterGame">进入游戏</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import socket from '@/socket/index'
import{MessageBox}from'element-ui'
export default {
  data() {
    return {
      // 表单信息
      formData: {
        nickname: ''
      },

      // 校验规则
      rules: {
        nickname: [{ required: true, message: '请输入您的昵称' }]
      }
    }
  },

  methods: {
    enterGame() {
      // 测试当前socket 模块发消息的能力
      // console.log(socket);
      // socket.emit('check_user_exist',this.formData.nickname,isExist=>{
      //   console.log(isExist);
      // })

     this.$refs.loginForm.validate(async flag=>{
       if (!flag)return  

      const nickname = this.formData.nickname
      //判断昵称是否重复
     const isExist= await this.$store.dispatch('checkUserExist',nickname)

  // console.log(isExist);
  if (isExist) {
    MessageBox.alert("大哥这个昵称被占用了")
  }else{
    localStorage.setItem('nickname',nickname)
    this.$router.push("/home")
  }

     })

    }
  }
}
</script>

<style scoped>
.login-card {
  width: 50%;
  margin: 0 auto;
  margin-top: 200px;
}
</style>
